<template>
  <view>
    <view class="smart-page-head">
      <view class="smart-page-head-title">text文本组件</view>
    </view>
    <view class="smart-padding-wrap">
      <view class="text-box" scroll-y="true">
        <text>{{text}}</text>
      </view>
      <button type="primary" :disabled="!canAdd" @click="add">add line</button>
      <button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      texts: [
        'HBuilder,400万开发者选择的IDE',
        'HBuilderX,轻巧、极速，极客编辑器',
        'uni-app，终极跨平台方案',
        'HBuilder,400万开发者选择的IDE',
        'HBuilderX,轻巧、极速，极客编辑器',
        'uni-app，终极跨平台方案',
        'HBuilder,400万开发者选择的IDE',
        'HBuilderX,轻巧、极速，极客编辑器',
        'uni-app，终极跨平台方案',
        '......'
      ],
      text: '',
      canAdd: true,
      canRemove: false,
      extraLine: []
    };
  },
  methods: {
    add: function (e) {
      this.extraLine.push(this.texts[this.extraLine.length % 12]);
      this.text = this.extraLine.join('\n');
      this.canAdd = this.extraLine.length < 12;
      this.canRemove = this.extraLine.length > 0;
    },
    remove: function (e) {
      if (this.extraLine.length > 0) {
        this.extraLine.pop();
        this.text = this.extraLine.join('\n');
        this.canAdd = this.extraLine.length < 12;
        this.canRemove = this.extraLine.length > 0;
      }
    }
  }
};
</script>

<style>

</style>